.food-container {
  position: relative;
  height: 100vh;
  padding: 20rpx;
  .top-container {
    .top {
      display: flex;
      width: 100%;
      justify-content: center;

      .image-wrapper {
        width: 160rpx;
        height: calc(160rpx * 4 / 13);
        position: relative;

        .image {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }

    .swiper-container {
      display: flex;
      justify-content: center;
      width: 95%;
      margin: 20rpx auto;
    }

    .locate-container {
      width: 100%;
      padding: 20rpx 40rpx;

      .image-wrapper {
        width: 240rpx;
        aspect-ratio: 227 / 62;
        position: relative;

        .image {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .address {
        display: flex;
        align-items: center;

        .icon {
          margin-right: 20rpx;
        }

        span {
          color: #acacac;
          font-size: 28rpx;
        }
      }
    }
  }

  .bottom-container {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100% - var(--height) - 40rpx);

    .left {
      width: 200rpx;
      background-color: #f1f1f1;
      border-radius: 0 32rpx 0 0;

      .scroll {
        height: 100%;
        padding-bottom: 240rpx; /* 根据 footer-container 的 bottom 调整 */
        box-sizing: border-box;
        .tap-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 30rpx 40rpx 0 40rpx;
          background-color: #f1f1f1;
          .title {
            color: #979797;
            font-size: 28rpx;
            font-weight: 600;
          }
          .subtitle {
            color: #979797;
            font-size: 16rpx;
          }
          .tap-line {
            width: 80%;
            margin-top: 30rpx;
            border-bottom: 1px solid #979797;
          }
        }
      }
    }

    .right {
      width: calc(100% - 200rpx);
      height: 100%;

      .scroll {
        height: 100%;
        box-sizing: border-box;
        .scroll-container {
          width: 100%;
          .type {
            font-size: 28rpx;
            font-weight: 600;
            margin: 30rpx 20rpx;
          }
          .good-detail {
            display: flex;
            justify-content: space-between;
            margin: 20rpx;
            .image-box {
              position: relative;
              width: 160rpx;
              height: 160rpx;
              .good-image {
                width: 100%;
                height: 100%;
                object-fit: contain;
                border-radius: 16rpx;
              }
              .remain {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                font-size: 24rpx;
                color: #cfcfcf;
                background-color: #5c5c5c;
                text-align: center;
                border-radius: 0 0 16rpx 16rpx;
              }
            }
            .info-box {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              width: calc(100% - 160rpx);
              margin-left: 20rpx;
              .top {
                .title {
                  font-weight: 600;
                }
                .subtitle {
                  color: #979797;
                  font-size: 28rpx;
                }
              }
              .bottom {
                display: flex;
                justify-content: space-between;
                align-items: baseline;
                .price-box {
                  display: flex;
                  align-items: baseline;
                  .symbol {
                    font-size: 24rpx;
                  }
                  .price {
                    font-weight: 600;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .footer-container {
    // display: flex;
    // justify-content: center;
    z-index: 100;
    position: fixed;
    bottom: 110rpx;
    left: 0;
    width: 100%;
    .footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 90%;
      height: 50rpx;
      border-radius: 32rpx;
      background-color: #fff;
      box-shadow: 1rpx 1rpx 5rpx #888888;
    }
  }
}

.active-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30rpx 40rpx 0 40rpx;
  background-color: #fff;
  .title {
    color: #979797 !important;
    font-size: 28rpx !important;
    font-weight: 600 !important;
  }
  .subtitle {
    color: #979797;
    font-size: 16rpx;
  }
  .tap-line {
    width: 80%;
    margin-top: 30rpx;
    border-bottom: 1px solid #979797;
  }
}
